import React from "react";
import styled from "styled-components";

const MoreApproveIconWrap = styled.div<{ top: string }>`
  position: absolute;
  right: 180px;
  top: ${(p) => p.top};
  z-index: 1;
`;

const SvgBg = styled.div<{ name: string }>`
  width: 128px;
  height: 128px;
  background-image: url("/public/scm/${(p) => p.name || "已作废"}.svg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  opacity: 0.5;
`;
export const MoreApproveIcon2 = ({
  dataInfo,
  top = "-6px",
}: {
  dataInfo?: any;
  top?: string;
}) => {
  if (!dataInfo || dataInfo.orderStatus != 54 || dataInfo.orderStatus != 65) {
    return null;
  }

  if (dataInfo.contrChange == 1) {
    return (
      <MoreApproveIconWrap top={top}>
        <SvgBg name="变更中" />
      </MoreApproveIconWrap>
    );
  }
  if (dataInfo.cancelStatus == 1) {
    return (
      <MoreApproveIconWrap top={top}>
        <SvgBg name="作废中" />
      </MoreApproveIconWrap>
    );
  }
  if (dataInfo.closeStatus == 1) {
    return (
      <MoreApproveIconWrap top={top}>
        <SvgBg name="关闭中" />
      </MoreApproveIconWrap>
    );
  }
  if (dataInfo.closeStatus == 2) {
    return (
      <MoreApproveIconWrap top={top}>
        <SvgBg name="已关闭" />
      </MoreApproveIconWrap>
    );
  }
  return null;
};
